import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:xiaomi_shop/app/modules/user/controllers/user_controller.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/services/xhttp.dart';
import 'package:xiaomi_shop/app/widget/logoWidget.dart';
import 'package:xiaomi_shop/models/messageModel.dart';

import '../controllers/phone_sms_login_step2_controller.dart';

class PhoneSmsLoginStep2View extends GetView<PhoneSmsLoginStep2Controller> {
  const PhoneSmsLoginStep2View({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('手机号快速登录'),
        centerTitle: true,
      ),
      body: ListView(
        padding: EdgeInsets.all(ScreenAdapter.width(40)),
        children: [
          const LogoWidget(),
          SizedBox(
            height: ScreenAdapter.height(80),
          ),
          SizedBox(
            child: Column(
              children: [
                const Text(
                  "请输入验证码",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text.rich(TextSpan(
                    text: "已发送至 ",
                    style: const TextStyle(color: Colors.grey),
                    children: [
                      TextSpan(
                          text: controller.phone.replaceRange(3, 7, "****"),
                          style: const TextStyle(color: Colors.black))
                    ])),
              ],
            ),
          ),
          // 六格验证码
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(60)),
            padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40),
                ScreenAdapter.width(40), ScreenAdapter.width(40), 0),
            child: PinCodeTextField(
              controller: controller.textEditingController,
              appContext: context,
              length: 6,
              autoFocus: true, // 自动弹出键盘
              keyboardType: TextInputType.number, // 数字键盘
              animationType: AnimationType.fade,
              animationDuration: const Duration(milliseconds: 300),
              dialogConfig: DialogConfig(
                  dialogTitle: "粘贴验证码",
                  dialogContent: "确定粘贴验证码？",
                  affirmativeText: "确定",
                  negativeText: "取消"), // 配置Dialog
              enableActiveFill: true,
              pinTheme: PinTheme(
                fieldHeight: 50,
                fieldWidth: 40,
                // 修改边框
                activeColor: Colors.black12, // 输入文字后边框的颜色
                selectedColor: Colors.orange, // 选中边框样式
                inactiveColor: Colors.black12, // 默认边框样式
                // 修改背景颜色
                activeFillColor: Colors.white,
                selectedFillColor: Colors.orange,
                inactiveFillColor: const Color.fromRGBO(245, 245, 245, 1),
                shape: PinCodeFieldShape.box,
                borderRadius: BorderRadius.circular(5),
              ),
              onChanged: (value) {
                print(value);
              },
              onCompleted: (value) async {
                print("输入完成：$value");
                print("text: ${controller.textEditingController.text}");
                // 验证验证码
                MessageModel messageModel =
                    await controller.validateLoginCode();
                if (messageModel.success) {
                  Toast.show(messageModel.message);
                  // 隐藏键盘
                  FocusScope.of(context).requestFocus(FocusNode());
                  // 更新用户信息
                  UserController userController = Get.find<UserController>();
                  userController.getUserInfo();
                  Get.back();
                } else {
                  Toast.show(messageModel.message);
                }
              },
              beforeTextPaste: (text) {
                print("粘贴验证码 : $text");
                return true;
              },
            ),
          ),
          SizedBox(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                    onPressed: () {},
                    child: const Text(
                      "重新发送",
                      style: TextStyle(color: Colors.black),
                    )),
                TextButton(
                    onPressed: () {},
                    child: const Text(
                      "获取帮助",
                      style: TextStyle(color: Colors.black),
                    )),
              ],
            ),
          )
          // 重新发送验证码
        ],
      ),
    );
  }
}
